<template>
  <div class="patrolTable-root">
    <formTitleVue
      title="监测数据分析"
    />
    <div class="select-ul">
      <el-cascader v-model="nowCascader" :options="cascader_options" @change="changeCascader"></el-cascader>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="facilityTypeName" label="设施类型">
        </el-table-column>
        <el-table-column prop="smallType" label="专题细类">
        </el-table-column>
        <el-table-column prop="largeType" label="专题大类">
        </el-table-column>
        <el-table-column prop="num" label="数量">
        </el-table-column>
        <el-table-column prop="threeCompare" label="同比（近三年）">
          <template slot-scope="scope">
            <compareIcon :nowNum="scope.row.three" :compareNum="scope.row.threeCompare"/>
          </template>
        </el-table-column>
        <el-table-column prop="fiveCompare" label="同比（近五年）">
          <template slot-scope="scope">
            <compareIcon :nowNum="scope.row.five" :compareNum="scope.row.fiveCompare"/>
          </template>
        </el-table-column>
        <el-table-column prop="oneCompare" label="环比（近一年）">
          <template slot-scope="scope">
            <compareIcon :nowNum="scope.row.one" :compareNum="scope.row.oneCompare"/>
          </template>
        </el-table-column>
        
      </el-table>
    </div>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import gdAreaSelectVue from "@/components/GdAreaSelect/GdAreaSelect.vue";
import { api_facilityMonitorDataAnalysis,api_cascader } from '@/api/jcfx/jcsjtj.js'
import compareIcon from "@/components/compareIcon/compareIcon.vue"

export default {
  name: "patrolTable",
  components: {
    formTitleVue,gdAreaSelectVue,compareIcon,
  },
  data() {
    return {
      searchForm: {
        bModeType: '',
        modeType: '',
        facilityTypeId: '',
        areaCode: this.$store.state.account.user.deptIds,
      },
      tableData: [],
      cascader_options: [],
      nowCascader: [''],
    };
  },
  methods: {
    getData(){
      api_facilityMonitorDataAnalysis(this.searchForm).then(res => {
        this.tableData = res.data
      })
    },
    // 获取级联数据下拉框
    getCascader(){
      api_cascader({type:'threeTypeFacility'}).then(res => {
        this.cascader_options = res.data
        return Promise.resolve()
      })
    },
    // 级联选择
    changeCascader(val){
      this.searchForm.bModeType = val[0]||''
      this.searchForm.modeType = val[1]||''
      this.searchForm.facilityTypeId = val[2]||''
      this.getData()
    }
  },
  async mounted(){
    await this.getCascader()
    this.getData()
  }
};
</script>

<style lang="scss" scoped>
.patrolTable-root {
  .select-ul {
    display: flex;
    flex-wrap: wrap;
    padding: 12px 0;
    .select-li {
      width: 200px;
      margin-right: 12px;
    }
  }
}
::v-deep .el-input__icon {
	top: 0px !important; 
}
</style>
